<div class="animated fadeIn">

<div class="table-responsive ulLine" style="margin-top: 20px; overflow: auto">

  <ul>
    <li class="li1" (click)="clickDetail(protegeLevel1[0])">
      <div *ngIf="protegeLevel1[0]" [class]="protegeLevel1[0]['loveWeek'] > 70 ? 'love1' : protegeLevel1[0]['loveWeek'] > 20 ? 'love2' : protegeLevel1[0]['loveWeek'] > 0 ? 'love3' : 'love4'">
        <span ><img class="imgStyle" src="{{protegeLevel1[0]['img'] ? imgUrl + protegeLevel1[0]['img'] : './assets/img/user@3x.png'}}" alt=""><span> {{protegeLevel1[0]['nickname']}} </span><span>（{{protegeLevel1[0]['mid']}}）</span></span>
      </div>
      <div *ngIf="!protegeLevel1[0]">
        <span >未注册</span>
      </div>
    </li>
  </ul>
  <ul>
    <li class="li2" *ngFor="let item of protegeL2" (click)="clickDetail(protegeLevel2[item])">
      <div *ngIf="protegeLevel2[item]" [class]="protegeLevel2[item]['loveWeek'] > 70 ? 'love1' : protegeLevel2[item]['loveWeek'] > 20 ? 'love2' : protegeLevel2[item]['loveWeek'] > 0 ? 'love3' : 'love4'">
        <span ><img class="imgStyle" src="{{ protegeLevel2[item]['img'] ? imgUrl + protegeLevel2[item]['img']: './assets/img/user@3x.png'}}" alt=""><span> {{protegeLevel2[item]['nickname']}} </span><span>（{{protegeLevel2[item]['mid']}}）</span></span>
      </div>
      <div *ngIf="!protegeLevel2[item]">
        <span>未注册</span>
      </div>
    </li>

  </ul>
  <ul>
    <li class="li3" *ngFor="let item of protegeL3"(click)="clickDetail(protegeLevel3[item])" >
      <div *ngIf="protegeLevel3[item]" [class]="protegeLevel3[item]['loveWeek'] > 70 ? 'love1' : protegeLevel3[item]['loveWeek'] > 20 ? 'love2' : protegeLevel3[item]['loveWeek'] > 0 ? 'love3' : 'love4'">
        <span ><img class="imgStyle" src="{{ protegeLevel3[item]['img'] ? imgUrl + protegeLevel3[item]['img']: './assets/img/user@3x.png'}}"alt=""><span> {{protegeLevel3[item]['nickname']}} </span><span>（{{protegeLevel3[item]['mid']}}）</span></span>
      </div>
      <div *ngIf="!protegeLevel3[item]">
        <span >未注册</span>
      </div>
    </li>
  </ul>
  <ul>
    <li class="li4" *ngFor="let item of protegeL4" (click)="clickDetail(protegeLevel4[item])">
      <div *ngIf="protegeLevel4[item]" [class]="protegeLevel4[item]['loveWeek'] > 70 ? 'love1' : protegeLevel4[item]['loveWeek'] > 20 ? 'love2' : protegeLevel4[item]['loveWeek'] > 0 ? 'love3' : 'love4'">
        <span ><img class="imgStyle" src="{{ protegeLevel4[item]['img'] ? imgUrl + protegeLevel4[item]['img']: './assets/img/user@3x.png'}}" alt=""><span> {{protegeLevel4[item]['nickname']}} </span><span>（{{protegeLevel4[item]['mid']}}）</span></span>
      </div>
      <div *ngIf="!protegeLevel4[item]">
        <span >未注册</span>

      </div>
    </li>
  </ul>

  <ul>
    <li class="li5" *ngFor="let item of protegeL5" (click)="clickDetail(protegeLevel5[item])">
      <div *ngIf="protegeLevel5[item]" [class]="protegeLevel5[item]['loveWeek'] > 70 ? 'love1' : protegeLevel5[item]['loveWeek'] > 20 ? 'love2' : protegeLevel5[item]['loveWeek'] > 0 ? 'love3' : 'love4'">
        <span ><img class="imgStyle" src="{{ protegeLevel5[item]['img'] ? imgUrl + protegeLevel5[item]['img']: './assets/img/user@3x.png'}}" alt=""><span> {{protegeLevel5[item]['nickname']}} </span> <span>（{{protegeLevel5[item]['mid']}}）</span></span>
      </div>
      <div  *ngIf="!protegeLevel5[item]">
        <span>未注册</span>

      </div>
    </li>
  </ul>





  <!--<div class="li1" *ngFor="let item1 of protegeData let i = index">-->
    <!--<div class="li2" *ngFor="let item2 of item1.children let j = index">-->
      <!--<div class="li3" *ngFor="let item3 of item2.children let k = index">-->
        <!--<div class="li4"  *ngFor="let item4 of item3.children let l = index">-->
          <!--<div class="li5" *ngFor="let item5 of item4.children let m = index">-->

          <!--</div>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->
  <!--</div>-->


</div>


  <ul class="ulStyle">
    <li (click)="userDetail(1)">会员信息</li>
    <li (click)="userDetail(2)">广告收入</li>
    <li (click)="userDetail(3)">销售收入</li>
    <li (click)="userDetail(4)">管理奖励</li>
    <li (click)="userDetail(5)">推荐人员</li>
  </ul>

  <div *ngIf="detailListState == 1">


    <div class="table-responsive" style="margin-top: 20px" *ngIf="userDetailData">
      <table class="table table-center table-bordered table-hover" style="min-width: 0px">
        <tbody class="tab-content">
          <tr class="text-nowrap">
            <td>用户ID：</td>
            <td>{{userDetailData.mid}}</td>
            <td>头像：</td>
            <td>
              <img class="imgStyle" src="{{userDetailData['img'] ? imgUrl + userDetailData['img'] : './assets/img/user@3x.png'}}" alt="">
            </td>
            <td>昵称：</td>
            <td>{{userDetailData.nickname}}</td>
          </tr>
          <tr class="text-nowrap">
            <td>身份证号码：</td>
            <td>{{userDetailData.idNumber}}</td>
            <td>手机号：</td>
            <td>{{userDetailData.account}}</td>
            <td>性别：</td>
            <td>
              <span *ngIf="userDetailData.sex == 1">男</span>
              <span *ngIf="userDetailData.sex == 2">女</span>
            </td>
          </tr>
          <tr class="text-nowrap">
            <td>年龄：</td>
            <td>{{userDetailData.age}}</td>
            <td>当前汗水：</td>
            <td>{{userDetailData.sweat}}</td>
            <td>注册时间：</td>
            <td>{{userDetailData.addTime*1000 | date: 'yyyy-MM-dd hh:mm:ss'}}</td>
          </tr>
        </tbody>
      </table>

    </div>




  </div>

  <div *ngIf="detailListState == 2">
    <div class="table-responsive" style="margin-top: 20px">
      <table class="table table-center table-bordered table-hover" style="min-width: 0px">
        <thead class="table-inverse">
        <tr class="text-nowrap">
          <td>周期</td>
          <td>汗水</td>
          <td>兑换薪水（元）</td>
          <td>兑换时间</td>
        </tr>
        </thead>
        <tbody class="tab-content">
          <tr *ngFor="let item of advertIncome let i = index">
            <td>
              {{item.start}}至{{item.end}}
            </td>
            <td>
              {{item.sweats}}
            </td>
            <td>{{item.amount}}</td>
            <td>{{item.addTime}}</td>
          </tr>
        </tbody>
      </table>

      <p *ngIf="!advertIncome.length" class="noneData">暂无数据</p>

    </div>
  </div>
  <div *ngIf="detailListState == 3">
    <div class="table-responsive" style="margin-top: 20px">
      <table class="table table-center table-bordered table-hover" style="min-width: 0px">
        <thead class="table-inverse">
        <tr class="text-nowrap">
          <td>广告标题</td>
          <td>投放金额</td>
          <td>奖励金</td>
          <td>发放时间</td>
        </tr>
        </thead>
        <tbody class="tab-content">
          <tr *ngFor="let item of saleIncome let i = index">
            <td>{{item.title}}</td>
            <td>{{item.amount}}</td>
            <td ><span *ngIf="item.putSweatAmount !== '0.00' ">{{item.putSweatAmount}}</span></td>
            <td>{{item.amountTime}}</td>
          </tr>
        </tbody>
      </table>

      <p *ngIf="!saleIncome.length" class="noneData">暂无数据</p>

      <!--分页组件-->
      <div style="float: right">
        <pagination [boundaryLinks]="true" [totalItems]="totalItems" [(ngModel)]="currentPage" itemsPerPage="10" [maxSize]="maxSize" previousText="上一页" nextText="下一页" firstText="首页" lastText="末页" (pageChanged)="pageChanged2($event)"></pagination>
      </div>
    </div>
  </div>
  <div *ngIf="detailListState == 4">

    <div class="table-responsive" style="margin-top: 20px">
      <table class="table table-center table-bordered table-hover" style="min-width: 0px">
        <thead class="table-inverse">
        <tr class="text-nowrap">
          <td>管理周期</td>
          <td>管理金额(元)</td>
          <td>发放时间</td>
        </tr>
        </thead>
        <tbody class="tab-content">
          <tr *ngFor="let item of managementData let i = index">
            <td>{{item.start}}至{{item.end}}</td>
            <td>{{item.managementAmount}}</td>
            <td>{{item.addTime}}</td>
          </tr>
        </tbody>
      </table>

      <p *ngIf="!managementData.length" class="noneData">暂无数据</p>

      <!--分页组件-->
      <div style="float: right">
        <pagination [boundaryLinks]="true" [totalItems]="totalItems" [(ngModel)]="currentPage" itemsPerPage="10" [maxSize]="maxSize" previousText="上一页" nextText="下一页" firstText="首页" lastText="末页" (pageChanged)="pageChanged1($event)"></pagination>
      </div>
    </div>

  </div>
  <div *ngIf="detailListState == 5">

    <div class="row" style="margin-top: 20px;">

      <div class="form-group col-2" >

        <select name="select" class="form-control" [(ngModel)]="level">
          <option value="">级别</option>
          <option *ngFor="let item of levelArr" [value]="item">第{{item}}级</option>
        </select>

      </div>

      <!--查询-->
      <div class="form-group col-1" style="padding-left:5px">
        <button type="button" class="btn btn-primary btn-radius" (click)="userDetail(5)">查询</button>
      </div>



    </div>

    <div class="table-responsive" style="margin-top: 20px">
      <table class="table table-center table-bordered table-hover" style="min-width: 0px">
        <thead class="table-inverse">
        <tr class="text-nowrap">
          <td>推荐级别</td>
          <td>用户ID</td>
          <td>头像</td>
          <td>昵称</td>
          <td>身份证号码</td>
          <td>手机号</td>
          <td>性别</td>
          <td>年龄</td>
          <td>当前汗水</td>
          <td>注册时间</td>
        </tr>
        </thead>
        <tbody class="tab-content">
        <tr *ngFor="let item of recommendArr let i = index">
          <td>第{{item.grade}}级</td>
          <td>{{item.mid}}</td>
          <td>
            <img class="imgStyle" src="{{ item['img'] ? imgUrl + item['img']: './assets/img/user@3x.png'}}" alt="">
          </td>
          <td>{{item.nickname}}</td>
          <td>{{item.idNumber}}</td>
          <td>{{item.account}}</td>
          <td>
            <span *ngIf="item.sex == 1">男</span>
            <span *ngIf="item.sex == 2">女</span>
          </td>
          <td>{{item.age}}</td>
          <td>{{item.sweat}}</td>
          <td>{{item.addTime*1000 | date: 'yyyy-MM-dd hh:mm:ss'}}</td>
        </tr>
        </tbody>
      </table>

      <p *ngIf="!recommendArr.length" class="noneData">暂无数据</p>

      <!--分页组件-->
      <div style="float: right">
        <pagination [boundaryLinks]="true" [totalItems]="totalItems" [(ngModel)]="currentPage" itemsPerPage="10" [maxSize]="maxSize" previousText="上一页" nextText="下一页" firstText="首页" lastText="末页" (pageChanged)="pageChanged($event)"></pagination>
      </div>
    </div>
  </div>


</div>


